<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="8">
            <a-form-model-item label="所属网格" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="orgCode">
              <j-select-depart v-model="model.orgCode" :multi="true" store="orgCode"  />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="房屋编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="manageNumber">
              <a-input v-model="model.manageNumber" placeholder="请输入房屋编号"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="model.name" placeholder="请输入姓名"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="身份证号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="idCard">
              <a-input v-model="model.idCard" placeholder="请输入身份证号"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sex">
              <j-dict-select-tag type="list" v-model="model.sex" dictCode="sex" placeholder="请选择性别" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="与户主关系" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ownerConcern">
              <j-dict-select-tag type="list" v-model="model.ownerConcern" dictCode="household_relationship" placeholder="请选择与户主关系" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="是否本户联系人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isContact">
              <j-dict-select-tag type="list" v-model="model.isContact" dictCode="is_linkman" placeholder="请选择是否本户联系人" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="联系方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="phone">
              <a-input v-model="model.phone" placeholder="请输入联系方式"  ></a-input>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="8">
            <a-form-model-item label="现居住地分布" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="currentDistribute">
              <j-dict-select-tag type="list" v-model="model.currentDistribute" dictCode="dwell_distribute" placeholder="请选择现居住地分布" />
            </a-form-model-item>
          </a-col> -->
          <a-col :span="8">
            <a-form-model-item label="户籍地" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="censusArea">
              <a-input v-model="model.censusArea" placeholder="请输入户籍地"  ></a-input>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="8">
            <a-form-model-item label="省" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="province">
              <a-select
                placeholder="请选择省"
                v-model="model.province"
                @change="provinceChange"
              >
                <a-select-option
                  v-for="(item, index) in provinceData"
                  :key="index"
                  :label="item.name"
                  :value="item.name">
                  {{ item.name }}
                </a-select-option>
            </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="市" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="city">
              <a-select
                placeholder="请选择市"
                v-model="model.city"
                @change="cityChange"
              >
                <a-select-option
                  v-for="(item, index) in cityData"
                  :key="index"
                  :label="item.name"
                  :value="item.name">
                  {{ item.name }}
                </a-select-option>
            </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="区" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="region">
              <a-select
                placeholder="请选择区"
                v-model="model.region"
                @change="regionChange"
              >
                <a-select-option
                  v-for="(item, index) in areaData"
                  :key="index"
                  :label="item.name"
                  :value="item.name">
                  {{ item.name }}
                </a-select-option>
            </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="镇" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="town">
              <a-select
                placeholder="请选择镇"
                v-model="model.town"
                @change="townChange"
              >
                <a-select-option
                  v-for="(item, index) in townData"
                  :key="index"
                  :label="item.name"
                  :value="item.name">
                  {{ item.name }}
                </a-select-option>
            </a-select>
            </a-form-model-item>
          </a-col> -->
          <a-col :span="8">
            <a-form-model-item label="现居住地" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="currentResidence">
              <a-input v-model="model.currentResidence" placeholder="请输入现居住地"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="职业" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workUnit">
              <a-input v-model="model.workUnit" placeholder="请输入职业"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="民族" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="nation">
              <j-dict-select-tag type="list" v-model="model.nation" dictCode="nation" placeholder="请选择民族" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="政治面貌" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="politicsStatus">
              <j-dict-select-tag type="list" v-model="model.politicsStatus" dictCode="person_status" placeholder="请选择政治面貌" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="学历" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="education">
              <j-dict-select-tag type="list" v-model="model.education" dictCode="education" placeholder="请选择学历" />
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="8">
            <a-form-model-item label="宗教信仰" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="religion">
              <a-input v-model="model.religion" placeholder="请输入宗教信仰"  ></a-input>
            </a-form-model-item>
          </a-col> -->
          <!-- <a-col :span="8">
            <a-form-model-item label="婚姻状况" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="matrimony">
              <a-input v-model="model.matrimony" placeholder="请输入婚姻状况"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="健康状况" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="healthCodeStatus">
              <a-input v-model="model.healthCodeStatus" placeholder="请输入健康状况"  ></a-input>
            </a-form-model-item>
          </a-col> -->
          <a-col :span="8">
            <a-form-model-item label="入党时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="partyTime">
              <j-date placeholder="请选择入党时间" v-model="model.partyTime"  style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="学生所在学校" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="studentSchool">
              <a-input v-model="model.studentSchool" placeholder="请输入学生所在学校"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="学校类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="schoolGenre">
              <j-dict-select-tag type="list" v-model="model.schoolGenre" dictCode="school_genre" placeholder="请选择学校类型" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="是否常住人口" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isResidence">
              <j-dict-select-tag type="list" v-model="model.isResidence" dictCode="is_linkman" placeholder="请选择是否常住人口" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="车辆类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="carGenre">
              <j-dict-select-tag type="list" v-model="model.carGenre" dictCode="car_genre" placeholder="请选择车辆类型" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="车牌号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="carNumb">
              <a-input v-model="model.carNumb" placeholder="请输入车牌号"  ></a-input>
            </a-form-model-item>
          </a-col>

          <a-col :span="8">
            <a-form-model-item label="房屋状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="houseStatus">
              <j-dict-select-tag type="list" v-model="model.houseStatus" dictCode="house_status" placeholder="请选择房屋状态" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
              <a-textarea v-model="model.remark" rows="4" placeholder="请输入备注" />
            </a-form-model-item>
          </a-col>

          <!-- <a-col :span="8">
            <a-form-model-item label="本次是否核酸" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isHs">
              <j-switch v-model="model.isHs"  ></j-switch>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="最后一次核酸时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="hsTime">
              <a-input v-model="model.hsTime" placeholder="请输入最后一次核酸时间"  ></a-input>
            </a-form-model-item>
          </a-col> -->
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  const { province, city, area, town } = require('province-city-china/data');

  export default {
    name: 'YzPersonResidenceForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
            isHs:"N",
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
           manageNumber: [
              { required: true, message: '请输入房屋编号!'},
           ],
           name: [
              { required: true, message: '请输入姓名!'},
           ],
           idCard: [
              { required: true, message: '请输入身份证号!'},
           ],
           sex: [
              { required: true, message: '请输入性别!'},
           ],
           ownerConcern: [
              { required: true, message: '请输入与户主关系!'},
           ],
           phone: [
              { required: true, message: '请输入联系方式!'},
           ],
           censusArea: [
              { required: true, message: '请输入户籍地!'},
           ],
           currentResidence: [
              { required: true, message: '请输入现居住地!'},
           ],
           province: [
              { required: true, message: '请选择省!'},
           ],
           city: [
              { required: true, message: '请选择市!'},
           ],
           region: [
              { required: true, message: '请选择区!'},
           ],
           town: [
              { required: true, message: '请选择镇!'},
           ],
        },
        url: {
          add: "/personResidence/yzPersonResidence/add",
          edit: "/personResidence/yzPersonResidence/edit",
          queryById: "/personResidence/yzPersonResidence/queryById"
        },
        provinceData: province,
        cityData: [],
        areaData: [],
        townData: []

      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        let { province } = this.model
        if(province){
          this.provinceChange(province, 'edit')
        }

        this.visible = true;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }

        })
      },

      // 选择省
      provinceChange(e, type){
        this.areaData = []
        this.townData = []

        let data = this.provinceData.find(item => {
          return item.name == e
        })

        this.cityData = city.filter(item => {
          return item.province == data.province
        })

        if(!this.cityData.length){
          this.cityData = [data]
        }

        if(type == 'edit' && this.model.city){
          this.cityChange(this.model.city, 'edit')
        }else {
          this.model.city = ''
          this.model.region = ''
          this.model.town = ''
        }

      },

      // 选择市
      cityChange(e, type){
        this.townData = []

        let data = this.cityData.find(item => {
          return item.name == e
        })

        if(!data.city){
          this.areaData = area.filter(item => {
              return item.province == data.province
          })
        }else{
          this.areaData = area.filter(item => {
              return item.city == data.city && item.province == data.province
          })
        }

        if(type == 'edit' && this.model.region){
          this.regionChange(this.model.region, 'edit')
        }else {
          this.model.region = ''
          this.model.town = ''
        }

      },

      // 选择区
      regionChange(e, type){

        let data = this.areaData.find(item => {
          return item.name == e
        })

        this.townData = town.filter(item => {
          return item.city == data.city  && item.province == data.province  && item.area == data.area
        })

        if(type == 'edit' && this.model.town){
          this.townChange(this.model.town, 'edit')
        }else {
          this.model.town = ''
        }
      },

      // 选择镇
      townChange(e, type){
        this.$delete(this.model, 'town')
        this.model.town = e
        this.$set(this.model, 'town', e)
      }

    }
  }
</script>
